@import './var.less';
@import './deleteWorks.less';
@import './selectWork.less';
@import './search.less';
@import './rightButtons.less';
@import './centerWrap.less';
@import './outputWrap.less';
@import './logWrap.less';
@import './msgBox.less';
@import './blockAds.less';
@import './imageViewer.less';

// 储存通用规则和一些零散的元素的规则
.warn {
  color: #d27e00;
}

.red {
  color: #f00;
}

.green {
  color: #14ad27;
}

.beautify_scrollbar {
  // 滚动条整体
  // width 是垂直滚动条的宽度，height 是水平滚动条的高度
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  // 整个滚动条的底色
  //&::-webkit-scrollbar-track-piece {background:#fcfcfc;}

  // 滚动条的滑块部分
  &::-webkit-scrollbar-thumb {
    background-color: #3ab8f2;
    border-radius: 10px;
  }

  // 垂直滚动条的滑块部分
  // &::-webkit-scrollbar-thumb:vertical {
  //   background-color: @beautifyBlue;
  //   border-radius: 10px;
  // }

  // 水平滚动条的滑块部分
  // &::-webkit-scrollbar-thumb:horizontal {
  //   background-color: @beautifyBlue;
  //   border-radius: 10px;
  // }
}

#quickBookmarkEl {
  font-size: 34px;
  line-height: 30px;
  margin-right: 15px;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.bookmarkedColor {
  color: #ff4060 !important;
}

#tip {
  color: #fff;
  font-size: 14px;
  position: fixed;
  z-index: 5001;
  max-width: 500px;
  left: 0;
  top: 0;
  background: #02a3ec;
  padding: 6px 8px;
  border-radius: 5px;
  line-height: 20px;
  word-break: break-word;
  display: none;
}

#down_id_input {
  margin: 6px auto;
  background: #fff;
  width: 600px;
  height: 80px;
  font-size: 12px;
  padding: 7px;
  display: none;
  border: 1px solid @themeBlue;
}

// 如果一些元素在切换颜色主题时背景颜色会变化，就给它们加上渐变效果
#logWrap,
.centerWrap,
.centerWrap_head,
.outputWrap,
.settingForm,
.tabsTitle,
.xz_msg_box {
  transition: background 0.5s;
}

.fastScreenArea {
  text-align: center;
  background: #fff;

  a {
    display: inline-block;
    padding: 10px;
    color: #258fb8;

    &:hover {
      text-decoration: underline;
    }
  }
}

.theme-dark {
  &.fastScreenArea {
    text-align: center;
    background: initial;

    a {
      display: inline-block;
      padding: 10px;
      color: #fff;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
